<html>

<head>

</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var coordinates = [
            [0, 0, 1, 0, 0, 0, 0, 1],
            [0, 1, 1, 1, 0, 1, 1, 1],
            [1, 1, 1, 1, 1, 0, 0, 1],
            [0, 1, 1, 1, 0, 0, 1, 1],
            [0, 0, 1, 0, 0, 0, 0, 1],
        ];


        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');

        var h = 5;
        var w = 8;

        canvas.width = w * 40;
        canvas.height = h * 40;

        ctx.fillStyle = '#4facfe ';
        ctx.rect(0, 0, w * 40, h * 40);
        ctx.fill();

        ctx.lineWidth = 5;


        for (var k = 0; k < h; k++) {
            for (var p = 0; p < w; p++) {
                if (coordinates[k][p] == 1) {
                    ctx.beginPath();
                    ctx.fillStyle = '#00f2fe';
                    ctx.rect(p * 40, k * 40, 40, 40)
                    ctx.fill();
                }

            }
        }

        for (var i = 0; i <= h; i++) {
            for (var j = 0; j <= w; j++) {
                ctx.beginPath();
                ctx.moveTo(j * 40, i * 40);
                ctx.lineTo(j * 40, (h - i) * 40);

                ctx.moveTo(j * 40, i * 40);
                ctx.lineTo((w - j) * 40, i * 40);
                ctx.strokeStyle = "#e2d1c3";
                ctx.stroke();
            }
        }


        const getCountAndArea = () => {
            let sum = [];
            let count = 0;
            for (let i = 0; i < h; i++) {
                for (let j = 0; j < w; j++) {

                    //连续1的个数
                    if (coordinates[i][j] == 1) {
                        let buf = 0;
                        buf = linkSum(i, j, buf);
                        count++;
                        sum.push({
                            index: count,
                            area: buf
                        });
                    }
                }
            }
            return {
                count,
                sum
            };
        }

        var res = [];
        //计算连续的面积和个数
        const linkSum = (i, j, num) => {
            //走过的路就置0
            coordinates[i][j] = 0;
            res.push({
                w: j,
                h: i,
            })
            num++;
            //向上

            if ((i + 1 < h) && coordinates[i + 1][j] == 1) {
                num = linkSum(i + 1, j, num);
            } else {

            }
            //向下
            if ((j + 1 < w) && coordinates[i][j + 1] == 1) {
                num = linkSum(i, j + 1, num);
            }
            //向左
            if ((i - 1 >= 0) && coordinates[i - 1][j] == 1) {
                num = linkSum(i - 1, j, num);
            }
            //向右
            if ((j - 1 >= 0) && coordinates[i][j - 1] == 1) {
                num = linkSum(i, j - 1, num);
            }

            return num;
        }


        getCountAndArea();

        draw();
        function draw() {
            var i = 0;
            var timeid = setInterval(function () {
                if (i >= res.length) {
                    window.clearInterval(timeid);
                    return;
                }
                console.log(i);

                ctx.beginPath();
                ctx.fillStyle = '#d1fdff';
                ctx.rect(res[i].w * 40, res[i].h * 40, 40, 40)
                ctx.fill();

                i++;
            }, 200)
        }
    </script>
</body>

</html>